<template>
    <view class="content">
        <mine-head title="主页" :background="background" :borderBottom="false" back-icon-color='#fff'></mine-head>
        <view class="topT">
            <view class="pic fl"><image :src="baseUrl + indexData.photo" mode=""></image></view>
            <view class="fr" v-if="indexData.isFollow!=null">
                <view class="btn2 btn3"  @click="guanzhu(false)" v-if="indexData.isFollow">取关</view>
                <view class="btn2" v-else @click="guanzhu(true)">关注</view>
            </view>
            <view class="btn1 fr" v-else @click="goTo('/pages/comB/community/upDate')">
                <image src="/static/img/community/col1img1.png" mode="heightFix"></image>
                发布
            </view>
            <view class="clear"></view>
            <view class="info">
                {{indexData.nickName}}
                <image v-if="indexData.sex=='男'" src="/static/img/community/col1img1.png" mode="heightFix"></image>
                <image v-if="indexData.sex=='女'" src="/static/img/community/col1img2.png" mode="heightFix"></image>
            </view>
            <view class="item">
                <view @click="goTo('/pages/comB/community/list?type=1',true)">关注<text>{{indexData.followCount}}</text></view>
                <view @click="goTo('/pages/comB/community/list?type=2',true)">粉丝<text>{{indexData.fansCount}}</text></view>
                <view>获赞<text>{{indexData.likeCount || 0}}</text></view>
            </view>
        </view>
        <view class="con">
            <view class="list">
                <view class="item" v-for="(item,index) in indexList" :key="index" @click="goTo('/pages/comB/community/view?id=' + item.id)">
                    <view class="top">
                        <view class="pic fl"><image :src="baseUrl + item.user.photo" mode=""></image></view>
                        <view class="text">
                            <view class="name">{{item.user.nickName}}</view>
                            <view class="time"><text v-if="item.recommend==1">推荐</text>{{item.createTime}}</view>
                        </view>
                    </view>
                    <view class="bot">
                        <view class="textC clamp4">
                            {{item.content}}
                        </view>
                        <view class="img">
                            <view class="pic" v-for="(img,index2) in item.mulImg" :key="index2"  @click.stop="imgPreview(item.mulImg,img,index2)"><image :src="baseUrl + img" mode=""></image></view>
                        </view>
                        <view class="info">#{{item.topic}}</view>
                        <view class="btn fl">
                            <view :class="{on:item.isLike}" @click.stop="onLike(item.isLike,item.id,index)">{{item.likeCount}}</view>
                            <view>{{item.replyCount}}</view>
                        </view>
                        <view class="del fr" v-if="indexData.isFollow==null" @click.stop="plDelete(item.id,index)">
                            删除
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import config from '@/utils/config';
	export default {
		data() {
			return {
				indexData:null,
                page:1,
                homeUserId:null,
                baseUrl:config.host1,
                indexList:[],
                background:{
                    backgroundColor:'rgba(255,255,255,0)'
                }
			};
		},
        onLoad(option) {
            this.homeUserId=option.id
        },
        onShow() {
            this.page=1
            this.indexList=[]
        	this.getHome(this.homeUserId)
            this.getList()
        },
        onReachBottom() {
            this.page=this.page+1
            this.getList()
        },
        methods:{
			imgPreview(list,url,index) {
				let arr = []
				list.forEach((item, index) => {
					if (item) {
						let str = this.baseUrl +item
						arr.push(str)
					}
				})
				// let index = arr.findIndex(value => value == url)
				console.log(index)
				uni.previewImage({
					current: index,
					urls: arr,
				});
			},
            goTo(url,key){
                if(key && this.indexData.isFollow!=null){
                    uni.$u.toast('不可查看他人粉丝或关注')
                    return
                }
                uni.$_navFn('to',url)
            },
            guanzhu(key){
                let that = this;
                uni.$_get({
                	url: key?"add-guanzhu|"+'?id=' + that.homeUserId:"cacel-guanzhu|"+'?id=' + that.homeUserId,
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.getHome(that.homeUserId)
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            plDelete(id,index){
                let that = this;
                uni.$_publicModal('确认删除',function(){
                    uni.$_get({
                    	url: "upDate-delete|"+'?id=' + id,
                        that: that,
                        success(res) {
                            if(res.code == 0){
                                uni.$u.toast('删除成功')
                                that.indexList.splice(index,1)
                            }
                        },
                        fail(err) {
                        	console.log(err)
                        }
                    });
                })
            },
            onLike(key,id,index){
                let that = this;
                let p = {
                    dynamicId:id
                }
                uni.$_post({
                    url: key?'cancel-like':'is-like',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            that.indexList[index].isLike=!that.indexList[index].isLike
                            key?that.indexList[index].likeCount=that.indexList[index].likeCount-1:that.indexList[index].likeCount=that.indexList[index].likeCount+1
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
                
            },
            getHome(id){
                let that = this;
                uni.$_get({
                	url: id?"home-view|"+'?id=' + id:"home-view",
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.indexData = res.data
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            getList() {
            	let that = this;
                let p = {
                    homeUserId:that.homeUserId,
                    pageNo:that.page,
                    pageSize:5
                }
                uni.$_post({
                    url: "home-list",
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            var list=[]
                            that.indexList.forEach(item => {
                                list.push(item)
                            })
                            res.data.records.forEach(item => {
                                list.push(item)
                            })
                            that.indexList = list
                            console.log(that.indexList,666)
                        }  
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
        }
	}
</script>

<style lang="scss">
    .content{
        background: url("/static/img/community/homebg.jpg") no-repeat center / cover;
        min-height: 100vh;
        .topT{
            padding: 100rpx 30rpx;
            .pic{
                width: 120rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-bottom: 40rpx;
                &::before{padding-top: 100%;}
            }
            .btn1{
                margin-top: 30rpx;
                font-size: 26rpx;
                color: #2c2c2c;
                line-height: 28rpx;
                white-space: nowrap;
                image{
                    display: block;
                    margin: 0 auto;
                    margin-bottom: 15rpx;
                    height: 42rpx;
                }
            }
            .btn2{
                width: 140rpx;
                height: 60rpx;
                line-height: 60rpx;
                border-radius: 30px;
                text-align: center;
                font-size: 26rpx;
                color: #ffffff;
                background: #6387ff;
                margin-top: 30rpx;
            }
            .btn3{
                background: #fff;
                color: #6387ff;
            }
            .info{
                font-size: 36rpx;
                color: #1c1c1c;
                font-weight: bold;
                line-height: 36rpx;
                margin-bottom: 105rpx;
                image{
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 30rpx;
                    height: 36rpx;
                }
            }
            .item{
                overflow: hidden;
                view{
                    float: left;
                    display: inline;
                    margin-right: 100rpx;
                    font-size: 24rpx;
                    line-height: 40rpx;
                    color: #1c1c1c;
                    text{
                        margin-left: 15rpx;
                        font-size: 48rpx;
                        color: #1c1c1c;
                        font-family: $uni-font-family-Heavy;
                    }
                }
            }
        }
        .con{
            background: #fff;
            border-top-right-radius: 50rpx;
            border-top-left-radius: 50rpx;
            padding: 60rpx 30rpx;
            min-height: 70vh;
            .list{
                .item{
                    margin-bottom: 30rpx;
                    .top{
                        margin-bottom: 20rpx;
                        overflow: hidden;
                        .pic{
                            width: 85rpx;
                            border-radius: 50%;
                            overflow: hidden;
                            margin-right: 20rpx;
                            &::before{
                                padding-top: 100%;
                            }
                        }
                        .text{
                            overflow: hidden;
                            padding-top: 5rpx;
                            .name{
                                font-size: 30rpx;
                                color: #999999;
                                line-height: 32rpx;
                                margin-bottom: 15rpx;
                            }
                            .time{
                                font-size: 22rpx;
                                color: #959595;
                                line-height: 28rpx;
                                text{
                                    padding: 0 10rpx;
                                    background: #fadfde;
                                    border-radius: 30px;
                                    height: 28rpx;
                                    font-size: 18rpx;
                                    color: #ee7671;
                                    margin-right: 8rpx;
                                }
                            }
                        }
                    }
                    .bot{
                        margin-left: 105rpx;
                        border-bottom: 1rpx solid #e5e5e5;
                        padding-bottom: 30rpx;
                        overflow: hidden;
                        .textC{
                            margin-bottom: 25rpx;
                            font-size: 28rpx;
                            line-height: 40rpx;
                            color: #000000;
                        }
                        .img{
                            overflow: hidden;
                            margin-bottom: 15rpx;
                            .pic{
                                display: inline-block;
                                margin: 0 10rpx 10rpx;
                                width: calc(33.3333% - 20rpx);
                                &::before{
                                    padding-top: 100%;
                                }
                            }
                            .pic:nth-child(3){
                                margin-right: 0;
                            }
                        }
                        .info{
                            font-size: 28rpx;
                            color: #647fd6;
                            line-height: 34rpx;
                            margin-bottom: 25rpx;
                        }
                        .btn{
                            overflow: hidden;
                            view{
                                font-size: 24rpx;
                                line-height: 30rpx;
                                color: #aaaaaa;
                                margin-right: 42rpx;
                                padding-left: 50rpx;
                                background: url("/static/img/community/zan.png") no-repeat center left / 32rpx;
                                float: left;
                                display: inline;
                            }
                            view:nth-child(1).on{
                                background-image: url("/static/img/community/zanh.png");
                            }
                            view:nth-child(2){
                                background-image: url("/static/img/community/pl.png");
                            }
                        }
                        .del{
                            font-size: 24rpx;
                            color: #e60000;
                            line-height: 26rpx;
                        }
                    }
                    .bot:last-child{
                        border-bottom: none;
                    }
                }
            }
        }
    }
</style>
